<template>
  <el-tabs
      v-model="activeName"
      type="card"
      stretch
  >
    <el-tab-pane v-for="name of categories" :key="name" :label="name" :name="name" lazy>
      <div class="edit_dev" style="text-align: left;" :key="name">
        <el-transfer v-model="dianJiaoLouDevice[name]" filterable :titles="['计算机楼', '电化教育楼']"
                     :button-texts="['搬到计算机楼', '搬到电教楼']" :data="devices[name]">
        </el-transfer>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
//element-plus组件有bug，和v-for同时使用会导致数据无法及时更新,因此该组件暂时不提供使用
import axios from "axios";

let activeName = '0';
const categories = ['相机类', '镜头类', '电池类', '存储类', '转接类', '常用配件类', '不常用配件类']
const devices = Object()
const dianJiaoLouDevice = Object()

for (const name of categories) {
  axios.get('/api/getByCategory', {
    params: {
      "category": name,
      "permission": 1,
      'place': 'All'
    }
  }).then(res => {
    let i = 0
    let temp = res.data
    let newArray = []
    dianJiaoLouDevice[name] = []
    devices[name] = newArray
    for (const device_name in temp) {
      for (const code in temp[device_name]['status']) {
        const keyword = device_name + " " + code + "号"
        newArray.push({
          key: i++,
          label: keyword,
          disabled: false,
        })
      }
    }
  })
}
</script>

<style scoped>
.edit_dev >>> .el-transfer-panel{
  width: 400px;
  height: 500px;
}
</style>